<template>
  <!-- 专题页 -->
  <div class="topic">
    <ul>
      <li v-for="item in topicArr" :key="item.id">
        <img v-lazy="item.scene_pic_url" alt="" />
        <p>{{ item.title }}</p>
        <p>{{ item.subtitle }}</p>
        <span>{{ item.price_info | Price }}</span>
      </li>
    </ul>
    <van-pagination
      v-model="currentPage"
      :page-count="totalPages"
      mode="simple"
      @change="changePage"
    />
  </div>
</template>

<script>
import { getTopicList } from "@/https/http";
// console.log(getTopicList);
export default {
  name: "VueTopic",

  data() {
    return {
      topicArr: [], //专题页数据
      currentPage: 1, //当前页数
      totalPages: "", //总页数
      size: 10,
    };
  },
  created() {
    //初始化调用
    //用函数来渲染页面（第一次渲染）
    this.getPage();
    console.log(1);
  },

  mounted() {},

  methods: {
    //变化页码就重新渲染页面
    changePage() {
      this.getPage();
    },

    //渲染函数
    getPage() {
      getTopicList({
        page: this.currentPage,
        size: this.items_per_page,
      }).then((res) => {
        console.log(res.data);
        if (res.data.errno == 0) {
          let { count, totalPages, pageSize, currentPage, data } = res.data;
          this.data = data.data;
          //总页面页码数
          this.totalPages = data.totalPages;
          this.items_per_page = data.pageSize;
          this.currentPage = data.currentPage;
          console.log(444, this.currentPage);

          //获取数据
          this.topicArr = res.data.data.data;
          console.log(555, this.topicArr);

          console.log(res);
          // 返回顶部
          document.documentElement.scrollTop = 0;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.topic {
  padding-bottom: 100px;
  box-sizing: border-box;
  text-align: center;

  img {
    width: 100%;
    display: block;
  }
  // 商品说明样式
  p {
    // width: 100%;
    font-size: 20px;
    margin: 5px 0;
    padding: 5px;
    color: rgb(45, 44, 44);
    opacity: 0.6;
    line-height: 150%;
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
  }
  // 价格样式
  span {
    font-size: 18px;
    color: rgb(200, 0, 0);
    opacity: 0.7;
    padding: 15px;
  }
}
</style>
